<template>
  <view style="width: 100%" @click="inputClick">
    <up-textarea
      :modelValue="modelValue"
      :placeholder="placeholderValue"
      border="none"
      height="26rpx"
      :focus="autoFocus"
      :placeholderStyle="placeholderStyle"
      :customStyle="customStyle"
      :autoHeight="true"
      :maxlength="300"
      :showConfirmBar="false"
      :fixed="true"
      :adjustPosition="false"
      @blur="inputBlur"
      @focus="inputFocus"
      @change="inputChange"
    ></up-textarea>
  </view>
</template>

<script setup>
import { ref, toRef, watch, inject, computed } from "vue";

const replayItem = inject("replayItem");
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  autoFocus: {
    type: Boolean,
    default: true,
  },
});
const modelValue = toRef(props, "modelValue");
const autoFocus = toRef(props, "autoFocus");
const emit = defineEmits(["update:modelValue"]);

const getNickname = () => {
  console.log("huifu", replayItem.value);
  return replayItem.value.authorName || "";
};
const placeholderValue = computed(() => {
  const nickname = getNickname();
  return nickname ? `回复${nickname}` : "说点什么吧～";
});

const placeholderStyle = {
  color: "#999",
  "font-size": "26rpx",
  "line-height": "26rpx",
};
const customStyle = {
  color: "#333",
  "background-color": "transparent",
  "font-size": "26rpx",
  "line-height": "26rpx",
  width: "100%",
};

const inputBlur = () => {};
const inputFocus = () => {};
const inputClick = () => {};
const inputChange = (value) => {
  emit("update:modelValue", value);
};
</script>

<style lang="scss"></style>
